<template>
  <div class="mouldPages">
    <div v-if="showFather">
      <serch :formInline="formInline" :options='options' v-on:serchFormInline="serchFormInline" :name="name" :title="title"></serch>
      <div class="checkTable">
        <div class="ct_title">
          程序列表
        </div>
        <div class="ct_button">
          <el-button type="primary" @click="GoProcedureAdd" class="newAdd" v-if="this.id == 1">新建程序</el-button>
        </div>
        
      </div>
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          :header-cell-style="{background:'#efefef', color:'#000'}"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            prop="programName"
            label="程序名称"
            fixed
            min-width="150">
          </el-table-column>
          <el-table-column
            prop="versionNumber"
            label="版本号"
            min-width="80">
          </el-table-column>
          <el-table-column
            prop="programType"
            label="程序类型"
            show-overflow-tooltip
            min-width="120">
            <template  slot-scope="scope">
              <div v-if="scope.row.programType == 1">
                塑造程序
              </div>
              <div v-if="scope.row.programType == 2">
                取证程序
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="describe"
            label="程序描述"
            show-overflow-tooltip
            min-width="150">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="上传时间"
            show-overflow-tooltip
            min-width="150">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            show-overflow-tooltip
            min-width="80">
            <template slot-scope="scope">
              <div v-if="scope.row.status == 1">
                上架中
              </div>
              <div v-else>
                已下架
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            min-width=150
            fixed='right'>
            <template slot-scope="scope">
              <div v-if="id == 2">
                <el-button 
                   type="text"
                  @click="handleLook(scope.$index, scope.row)">查看</el-button>
              </div>
              <div v-else>
                <div v-if="scope.row.status == 1">
                  <el-button 
                    type="text"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                    type="text"
                    @click="download(scope.$index, scope.row)">下架</el-button>
                </div>
                <div v-else>
                  <el-button 
                    type="text"
                    @click="handleEdit(scope.$index, scope.row)" >编辑</el-button>
                  <el-button 
                    type="text"
                    @click="upload(scope.$index, scope.row)">上架</el-button>
                </div>
              </div>
              
              
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      
    </div>
      
      <router-view></router-view>
  </div>
</template>

<script>
import serch from '../../components/serch.vue'
import { getProgramList ,updateProgramStatus } from '../../api/index'
export default {
  components:{
    serch
  },
  data(){
    return{
      id:'',
      name:'程序名称',
      title: '程序类型',
      //
      pageNum: 1,
      pageSize: 10,
      total:0,
      
      showFather:true,
      formInline: {
        fileName: '',
        mediaType: ''
      },
      tableData: [],
      options: [{
        value: '1',
        label: '塑造程序'
      }, {
        value: '2',
        label: '取证程序'
      },],
      currentPage:1
    }
  },
  watch:{
    $route(){
      if(this.$route.path == '/home/procedure'){
        this.showFather = true
      }else if(this.$route.path == '/home/procedure/procedureadd' || this.$route.path == '/home/procedure/procedureedit'  || this.$route.path == '/home/procedure/procedurelook'){
        this.showFather = false
      }
      this.init()
    }
    
  },
  created(){
    if(this.$route.path == '/home/procedure'){
      this.showFather = true
    }else if(this.$route.path == '/home/procedure/procedureadd' || this.$route.path == '/home/procedure/procedureedit' || this.$route.path == '/home/procedure/procedurelook'){
      this.showFather = false
    }
    this.init()
    console.log(this.tableData)
    this.id = sessionStorage.getItem('userId')
    console.log(this.id)
  },
  methods:{
    init(){
      let pageNum = this.pageNum
      let pageSize = this.pageSize
      let programName = this.formInline.fileName
      let programType = this.formInline.mediaType
      let params = { pageNum, pageSize, programName, programType}
      getProgramList(params).then(res=>{
        let re = res.data.data
        this.total = re.count
        this.tableData = re.object
      })
      
    },
    serchFormInline(e) {
      this.pageNum = 1
      this.pageSize = 10
      this.init()
    },
    handleSelectionChange(e){
    },
    GoProcedureAdd(){
      this.$router.push('/home/procedure/procedureadd')
    },
    handleEdit(index,item){
      this.$router.push({
        path: '/home/procedure/procedureedit' ,
        query:{
          id: item.id
        }
      })
    },
    handleLook(index,item){
      this.$router.push({
        path: '/home/procedure/procedurelook' ,
        query:{
          id: item.id
        }
      })
    },
    //上架
    upload(index,item){
      let id = item.id
      let status = 1
      let params = { id, status}
      this.$confirm('此操作将上架该程序, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateProgramStatus(params).then((res)=>{
          if(res.data.message == "success"){
            this.init()
            this.$message({
              type: 'success',
              message: '上架成功!'
            });
          }else{
            this.$message.error(res.data.message)
          }
        })
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消上架'
        });          
      });
    },
    //下架
    download(index,item){
       let id = item.id
      let status = 2
      let params = { id, status}
      this.$confirm('此操作将下架该程序, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateProgramStatus(params).then((res)=>{
            if(res.data.message == "success"){
              this.init()
              this.$message({
                type: 'success',
                message: '下架成功!'
              });
            }else{
              this.$message.error(res.data.message)
            }
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消下架'
          });          
        });
      
    },
    deleteLists(){
    },
    handleSizeChange(val) {
      this.pageNum = 1
      this.pageSize = val
      this.init()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.init()
    }
  }
}
</script>

<style lang='less' scoped>
.mouldPages{
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  background-color: #1D1F2C;
  height: calc(100vh - 108px);
  overflow: auto;
  .checkTable{
    background-color: #282C41;
    color: #fff;
    padding: 5px 15px;
    margin-top: 20px;
    border-left: 4px solid #04D4FF;
    background-image: url('../../assets/images/mouId/liang.png');
    background-repeat: no-repeat;
    background-size: contain ;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .ct_title{
      font-size: 20px;
    }
    .ct_button{
      .newAdd{
        color: #63E9FF;
        border: 1px solid #00CEF0;
        background-color: rgba(49, 203, 236, 0.1400);
        border-radius: 2px;
      }
    }
  }
  .tableBox{
    padding: 0 10px;
    background-color: #282C41;
    /deep/.el-table .el-table__cell {
      padding: 8px 0;
    }
    /deep/.el-table th.el-table__cell {
        background: #4F5367!important;
        color: #fff!important;
    }
    /deep/.el-table tr {
        background-color: #3C4052;
        color: #fff;
    }
    /deep/.el-table th.el-table__cell>.cell {
      border-right: 1px solid #fff;
      padding-left: 14px!important;
    }
    /deep/.el-table th.el-table__cell:last-child >.cell {
      border-right: 0;
    }
    /deep/.el-table th.el-table__cell:first-child >.cell {
      border-right: 0;
    }
    /deep/.el-table_body tr.hover_row>td.el-table_cell{
      background-color: red!important;
    }
    /deep/.el-button--text {
      color: #3FC1FF;
    }
    /deep/.el-table__body-wrapper {
      background-color: #3C4052;
    }
  }
  tbody tr:hover>td,/deep/ tbody tr.hover-row>td { background-color: rgba(63,193,255,0.2000) }
  .block{
    padding: 20px 0;
    background-color: #282C41;
    /deep/.el-pagination{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 15px;
    }
    /deep/.el-pagination__total {
      color: #fff;
    }
    /deep/.el-input__inner {
      color: #fff;
      background-color: transparent;
    }
    /deep/.el-pagination.is-background .el-pager li {
      margin: 0 5px;
      background-color: transparent;
      color: #fff;
      min-width: 30px;
      border-radius: 2px;
      border: 1px solid #fff;
    }
    /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: rgba(5, 190, 223, 0.14);
      color: #00BEDF;
      border: 1px solid #00BEDF;
    }
    /deep/.btn-prev {
       background-color: transparent;
      color: #FFF;
      border: 1px solid #fff;
    }
    /deep/.btn-next{
      background-color: transparent;
      color: #FFF;
      border: 1px solid #fff;
    }
    /deep/.el-pagination__jump {
      margin-left: 24px;
      font-weight: 400;
      color: #fff;
    }
  }
}
</style>